<template>
  <div class="seckill-detail">
    <!--  顶部区域  -->
    <div class="seckill-detail-status">
      <div class="seckill-detail-status-top">
        <div class="status-img">
          <img :src="itemDetail.status_img" alt="">
        </div>
        <div class="status-buy" v-if="itemDetail.has_buy == 0 && itemDetail.status == 1" @click="nowBuyToItemDetail(itemMiaoId, itemDetail.item_id)">立即购买</div>
      </div>
      <div class="seckill-detail-status-cont">
        <div class="status-item" v-if="itemDetail.status == 1 && itemDetail.has_buy == 0">购买后获得：<span>{{ itemDetail.frozen_commission }}</span>元佣金</div>
        <div class="status-item" v-if="itemDetail.status == 1">待收益佣金：<span>{{ itemDetail.wait_commission }}</span>元</div>
        <div class="status-item" v-if="itemDetail.status == 1 && itemDetail.has_buy == 1">已获得佣金：<span>{{ itemDetail.gain_commission}}</span>元</div>
        <div class="status-item" v-if="itemDetail.status == 2 && itemDetail.has_buy == 1">共获得佣金：<span>{{ itemDetail.gain_commission }}</span>元</div>
        <div class="status-item" v-if="itemDetail.fx_commission">分销佣金：<span>{{ itemDetail.fx_commission }}</span>元</div>
        <div class="status-item" v-if="itemDetail.dh_commission">订货佣金：<span>{{ itemDetail.dh_commission }}</span>元</div>
      </div>
    </div>


    <div>
      <van-list
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text=""
        @load="onLoad">
          <!--  单体内容展示  -->
          <div class="seckill-detail-item" v-for="(item, index) in skillLogList" :key="index">
            <div class="seckill-detail-item-top">
              <div class="seckill-detail-item-time">订单日期：<span>{{ item.order_date }}</span></div>
              <div>{{ item.order_status }}</div>
            </div>
            <div class="seckill-detail-item-cont">
              <div class="seckill-detail-item-img">
                <img :src="item.img" alt="">
              </div>
              <div class="seckill-detail-item-right">
                <div>订单号：<span>{{ item.order_no }}</span></div>
                <div>昵称：<span>{{ item.nickname }}</span></div>
                <div>金额：<span>¥ {{ item.payment }}</span></div>
                <div v-if="item.fx_commission">分销佣金：<span>{{ item.fx_commission }}</span>元</div>
                <div v-if="item.dh_commission">订货佣金：<span>{{ item.dh_commission }}</span>元</div>
              </div>
            </div>
          </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { GetSejMiaoDetail } from '@/api/dz/twelve.js'

import { List } from 'vant'

Vue.use(List)

export default Vue.extend({
  data() {
    return {
      itemMiaoId: 0,
      itemDetail: {},
      listParams: {
        p: 1,
        item_miao_id: 0
      },
      loading: false,
      error: false,
      finished: false,
      skillLogList: []
    }
  },

  created() {
    const id = this.$route.query.id

    // console.log(id)

    this.itemMiaoId = id
    this.listParams.item_miao_id = id

    this.onLoad()
  },

  mounted() {
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  },

  methods: {
    nowBuyToItemDetail(mid, id) {
      this.$JumpName(this, 'item-detail', { detailId: id, item_miao_id: mid })
    },

    onLoad() {
      GetSejMiaoDetail(this.listParams).then(res => {
        this.loading = false
        if (res.status == 1) {
          const data = res.data
          if (this.listParams.p == 1) {
            this.itemDetail = {
              item_id: data.item_id,
              status: data.status,
              has_buy: data.has_buy,
              wait_commission: data.wait_commission,
              frozen_commission: data.frozen_commission,
              gain_commission: data.gain_commission,
              fx_commission: data.fx_commission,
              dh_commission: data.dh_commission,
              status_img: data.status == 1 ? 'https://img.wifenxiao.com/h5-wfx/images/DZ/twelve/twelve_ing.png' : 'https://img.wifenxiao.com/h5-wfx/images/DZ/twelve/twelve_end.png'
            }
          }
          if (data.orders && data.orders.length > 0) {
            this.skillLogList.push(...data.orders)

            // eslint-disable-next-line no-plusplus
            this.listParams.p++
          } else {
            this.finished = true
          }
        } else {
          this.$Error(res.msg)
        }
      }).catch(() => {
        this.error = true
      })
    }
  }
})
</script>

<style lang="scss">
  .seckill-detail {
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    &-status {
      background: linear-gradient(to right,#e90104, #fe1b49);
      border-radius: 8px;
      padding: 16px;
      width: 100%;
      box-sizing: border-box;
      margin-bottom: 16px;
      &-top {
        margin-bottom: 16px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        .status-img {
          width: 288px;
          height: 40px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .status-buy {
          background: linear-gradient(to right, #ffd3b2, #ffeacc);
          border-radius: 38px;
          font-size: 24px;
          font-weight: 500;
          color: #753018;
          padding: 10px 40px 8px 24px;
          position: relative;
          &:before {
            content: '';
            display: block;
            position: absolute;
            top: 12px;
            right: 24px;
            border-top: 12px solid transparent ;
            border-bottom: 12px solid transparent;
            border-left: 12px solid #ffeacc;
            z-index: 11;
          }
          &:after {
            content: '';
            display: block;
            position: absolute;
            top: 12px; /*向下偏移量是矩形边框宽度的1.4（根号2）倍，即8.4，top值为-26-（-8.4）*/
            right: 20px;
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            border-left: 12px solid #753018;
          }
        }
      }

      &-cont {
        background: #fff7f8;
        border-radius: 4px;
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
        .status-item {
          font-size: 28px;
          font-weight: 400;
          color: #753018;
          line-height: 40px;
          margin-bottom: 16px;
          &:last-child{
            margin-bottom: 0;
          }
          span {
            font-size: 32px;
            font-weight: 700;
            color: #f40e27;
            margin-right: 6px;
          }
        }
      }
    }

    .seckill-detail-item {
      background: #ffffff;
      border-radius: 8px;
      margin-bottom: 16px;
      padding: 20px 16px;
      width: 100%;
      box-sizing: border-box;
      &-time {
        font-size: 24px;
        color: #666;
      }
      &-top {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
      }
      &-cont {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
      }
      &-img {
        width: 122px;
        height: 122px;
        overflow: hidden;
        border-radius: 8px;
        margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      &-right {
        width: calc(100% - 144px);
        &>div {
          font-size: 24px;
          font-weight: 400;
          margin-bottom: 8px;
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
</style>
